<style type="text/css">
    html{
        background-color: #f5f5f5;
    }
    body, h4, p{
        margin: 0;
    }
    ul{
        list-style: none;
        margin: 0;
        padding: 0;
    }
    ul li{
        margin: 0;
        padding: 0;
    }
    .module-wrap{
        width: 1000px;
        margin: 0 auto;
        background-color: #fff;
    }
    .module-top {
        margin: 0 65px;
        border-bottom: 1px solid #dcdddd;
        padding: 15px 0;
        position: relative;
    }
    .module-top .title {
        font-size: 22px;
        color: #ff4754;
        font-family: "黑体";
        line-height: 30px;
        margin-right: 250px;
    }
    .module-top .tips {
        font-size: 14px;
        color: #797979;
        line-height: 24px;
        margin-right: 250px;
    }
    .module-content{
        width: 500px;
        padding: 50px 0;
        margin: 0 auto;
    }
    .line-wrap{
    }
    .line-wrap label{
        width: 120px;
        float: left;
        text-align: right;
        color: #333333;
        font-size: 15px;
        line-height: 34px;
        height: 34px;
    }
    .line-wrap .content{
        width: 375px;
        margin-left: 125px;
        height: 72px;
        position: relative;
    }
    .line-wrap .content .input{
        height: 34px;
        position: relative;
    }

    .line-wrap .content .code{
        position: absolute;
        right: 0;
        top: 0;
        width: 123px;
    }

    .line-wrap .content .code .img-wrap{
        background-color: #e5e5e5;
        text-align: center;
        position: relative;
        height: 34px;
        line-height: 34px;
        box-sizing: border-box;
        border: 1px solid #e5e5e5;
        cursor: pointer;
    }

    .line-wrap .content .code .img-wrap img{
        width: 100%;
        height: 100%;
    }

    .line-wrap .content .code .img-wrap.failed img, .line-wrap .content .code .img-wrap.loader img {
        display: none !important;
    }
    .line-wrap .content .code .img-wrap.failed::after {
        content: '点击刷新';
        display: inline-block;
        width: 100%;
        font-size: 14px;
        vertical-align: top;
    }

    .line-wrap .content .code .img-wrap.loader::after {
        display: inline-block;
        position: absolute;
        content: '';
        left: 50%;
        top: 50%;
        margin: -8.5px 0 0 -8.5px;
        height: 17px;
        width: 17px;
        background: transparent no-repeat url("//r.51gjj.com/images/common/anim_loading.gif");
        background-size: 100%;
    }

    .line-wrap .content .code .img-tips{
        color: #333333;
        font-size: 12px;
        text-align: center;
        line-height: 30px;
    }

    .line-wrap .content .code + .input{
        width: 250px;
    }

    .line-wrap .content .input .select{
        border: 1px solid #c4c3c3;
        box-sizing: border-box;
        height: 34px;
        line-height: 32px;
        text-align: center;
    }

    .line-wrap .content .input .select.disabled{
        color: #777;
    }
    .line-wrap .content .input .select.disabled .arrow-down{
        display: none;
    }

    .line-wrap .content .input .select.text-left{
        text-align: left;
        padding-left: 12px;
    }

    .line-wrap .content .input .list{
        position: absolute;
        left: 0;
        top: 34px;
        z-index: 2;
        display: none;
        width: 373px;
        border: 1px solid #c4c3c3;
        background-color: #ffffff;
        padding: 0;
        margin: 0;
        list-style: none;
        border-top:  0;
    }

    .line-wrap .content .input .list li{
        padding: 0 12px;
        line-height: 34px;
        text-align: center;
    }

    .line-wrap .content .input .list li:hover, .line-wrap .content .input .list li.active{
        background-color: #eeeeee;
    }

    .line-wrap .content .input input{
        background: none;
        border-radius: 0;
        border: none;
        outline: none;
        display: block;
        font-size: 15px;
        color: #333333;
        height: 34px;
        border: 1px solid #c4c3c3;
        text-indent: 8px;
        width: 100%;
        box-sizing: border-box;
    }
    .line-wrap .content .input input:focus, .line-wrap .content .input .select.focus{
        border: 1px solid #1296ea;
    }
    .arrow-down{
        height: 10px;
        width: 30px;
        padding-top: 5px;
        position: absolute;
        right: 0;
        top: 50%;
        margin-top: -8px;
        border-left: 1px dashed #cfcfcf;
        cursor: pointer;
        z-index: 1;
    }
    .arrow-down span{
        width: 10px;
        height: 6px;
        background-image: url("//r.51gjj.com/image/static/20160726-icon-all.png");
        background-repeat: no-repeat;
        background-position: -50px -50px;
        display: block;
        margin: 0 auto;
    }
    .btn-wrap{
        margin-left: 125px;
        padding-top: 30px;
    }
    .segment-wrap{
        margin-left: 125px;
        margin-bottom: 25px;
        text-align: center;
    }
    .segment-nav {
        border: 1px solid #ff4754;
        border-radius: 17px;
        display: inline-block;
        vertical-align: top;
        overflow: hidden;
        height: 34px;
    }
    .segment-nav label{
        width: 90px;
        height: 100%;
        line-height: 34px;
        color: #ff4754;
        text-align: center;
        font-size: 14px;
        display: block;
        float: left;
        box-sizing: border-box;
        border-left: 1px solid #ff4754;
        background-color: transparent;
    }
    .segment-nav label:first-child{
        border-left: none;
    }
    .segment-nav label.active{
        background-color: #ff4754;
        color: white;
    }
    button{
        width: 100%;
        display: block;
        cursor: pointer;
        height: 44px;
        line-height: 44px;
        text-align: center;
        border: none;
        color: #ffffff;
        background-color: #ff4754;
        font-size: 20px;
        font-family: "黑体";
    }
    button:disabled{
        background-color: #c4c4c4;
    }

    .tab-wrap{
        position: absolute;
        top: 34px;
        left: 0;
        border: 1px solid #cccccc;
        background-color: #fff;
        z-index: 4;
        width: 590px;
    }
    .tab-bar{
        padding-top: 5px;
        border-bottom: 1px solid #e8e8e8;
        height: 28px;
        position: relative;
    }
    .tab-bar ul{
        height: 28px;
        padding-left: 16px;
    }
    .tab-bar ul li{
        height: 28px;
        float: left;
        line-height: 28px;
        min-width: 19px;
        text-align: center;
        cursor: pointer;
        color: #666666;
        font-size: 12px;
    }
    .tab-bar .active{
        border-bottom: 1px solid #ff4754;
        color: #ff4754;
    }
    .tab-content ul{
        padding: 8px 16px;
        overflow: hidden;
    }
    .tab-content ul li{
        float: left;
        color: #333333;
        font-size: 12px;
        cursor: pointer;
        height: 28px;
        line-height: 28px;
        padding-right: 16px;
        min-width: 50px;
    }
    .tab-close{
        width: 13px;
        height: 13px;
        cursor: pointer;
        background-image: url("//r.51gjj.com/image/static/20160726-icon-all.png");
        background-repeat: no-repeat;
        background-position: -50px -66px;
        display: block;
        position: absolute;
        right: 8px;
        top: 12px;
    }
    .car-loader{
        width: 400px;
        height: 300px;
        margin: 0 auto;
        background-image: url("//r.51gjj.com/images/common/car_loader.gif");
    }
    .message{
        text-align: center;
        color: #ff4754;
        font-size: 15px;
    }
    .toast {
        position: fixed;
        top: 100px;
        background-color: #000;
        z-index: 100;
        color: #fff;
        border-radius: 3px;
        line-height: 36px;
        font-size: 16px;
        padding: 0 10px;
        left: 50%;
        width: 300px;
        text-align: center;
        margin-left: -150px;
    }
    .checkbox-wrap{
        margin-left: 125px;
        line-height: 22px;
    }
    .checkbox-wrap a {
        color: #439df8;
        font-size: 12px;
        vertical-align: top;
        text-decoration: none;
        cursor: pointer;
    }
    .checkbox-wrap span {
        color: #333333;
        font-size: 12px;
        vertical-align: top;
    }
    .checkbox {
        display: inline-block;
        height: 16px;
        width: 16px;
        vertical-align: middle;
        position: relative;
        top: -1px;*
    display: inline;*
    zoom: 1;
    }
    .checkbox input[type="checkbox"] {
        display: none;
        display: block\9;
    }
    .checkbox input[type="checkbox"]:checked + label {
        background-position: -32px -66px;
    }
    .checkbox label {
        display: block;
        display: none\9;
        background-image: url("http://r.51gjj.com/image/static/20160726-icon-all.png");
        background-repeat: no-repeat;
        width: 16px;
        height: 16px;
        font-size: 0;
        vertical-align: top;
        background-position: -32px -50px;
        cursor: pointer;
    }
    .module-schema .checkbox-wrap{
        margin: 0;
        padding-left: 12px;
        line-height: 32px;
        border-top: #dcdddd 1px solid;
    }
    .module-schema{
        margin: 0 65px;
        border: #dcdddd 1px solid;
        border-top: none;
        border-bottom: none;
    }
    .module-schema .confirm{
        background-color: #ff4754;
        color: #fff;
        text-align: center;
        font-size: 18px;
        line-height: 45px;
        cursor: pointer;
    }
    iframe{
        width: 100%;
        display: block;
        min-height: 500px;
    }
</style>
<div class="module-wrap">
    <div class="module-top">
        <h4 class="title">公积金查询</h4>
        <p class="tips">快速查询公积金数据，余额、明细一键加载。</p>
    </div>
    <div class="module-content" id="loader" style="display: none;">
        <div class="car-loader"></div>
        <div class="message" id="message"></div>
    </div>
    <div class="module-schema" id="schema" style="display: none;">
        <iframe
                src="/hs/app/common/gjj/protocol.html"
                frameborder="no"
                border="0"
                marginwidth="0"
                marginheight="0"
                allowtransparency="yes">
        </iframe>
        <div class="checkbox-wrap">
            <div class="checkbox">
                <input type="checkbox" checked="checked" id="check1">
                <label for="check1"></label>
            </div>
            <span>同意《解析公积金用户协议》</span>
        </div>
        <div class="confirm">确&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;定</div>
    </div>
    <div class="module-content" id="main" style="display: none;">
        <div class="line-wrap">
            <label>公积金中心 ：</label>
            <div class="content">
                <div class="input">
                    <div class="select text-left" id="gjj_location"><span class="text"></span><span class="arrow-down"><span></span></span></div>
                </div>
            </div>
        </div>
        <div id="modules"></div>
        <div class="checkbox-wrap">
            <div class="checkbox">
                <input type="checkbox" checked="checked" id="check">
                <label for="check"></label>
            </div>
            <span>同意</span><a id="schema_link">《解析公积金用户协议》</a>
        </div>
        <div class="btn-wrap">
            <button disabled id="submit">
                <span>登&nbsp;&nbsp;&nbsp;&nbsp;录</span>
            </button>
        </div>
    </div>
</div>
<script type="text/javascript">
    $.fn.dropGjjMenu = function(){
        var el = $(this);
        el.on('click',(function(){
            var wrapper = undefined;
            return function(event){
                if(el.hasClass('disabled')){
                    return;
                }
                if(wrapper){
                    wrapper.show();
                    el.addClass('focus');
                    return;
                }
                $.ajax({ url: '/hs/gjj/get_cities_group_by_pinyin', type: 'POST', contentType: 'application/json', data:JSON.stringify({}), success: function(response){
                    el.addClass('focus');
                    wrapper = $('<div>',{'class':'tab-wrap'});
                    var barUl = $('<ul>').appendTo($('<div>',{'class':'tab-bar'}).append($('<div>',{'class':'tab-close'}).on('click', function(){
                                wrapper.hide();
                                el.removeClass('focus');
                            })).appendTo(wrapper)),
                            contentUl = $("<ul>").appendTo($("<div>",{'class':'tab-content'}).appendTo(wrapper));
                    el.after(wrapper);
                    for(var i=0; i<response.data.length; i++){
                        var item = response.data[i];
                        $('<li>').html(item.name).data('value', item.list).appendTo(barUl);
                    }
                    barUl.find('li').on('click',function(event){
                        var that = $(this),list = that.data('value');
                        that.closest('ul').find('li').removeClass('active');
                        that.addClass('active');
                        contentUl.empty();
                        for(var i=0; i<list.length;i++){
                            var item = list[i];
                            $('<li>').html(item.name).data('value', item).appendTo(contentUl);
                        }
                        contentUl.find('li').on('click',function(event){
                            el.html($(this).html()+'公积金中心');
                            el.trigger('togglegjj', [$(this).data('value')]);
                            wrapper.hide();
                            el.removeClass('focus');
                        });
                    });
                    barUl.find("li:eq(0)").trigger('click');
                }});
            }
        })())
    }
    $.fn.dropMenu = function(data){
        var el = $(this),
                s = $('<div>',{'class':'select'}).appendTo(el).on("click",function(){
                    $(this).addClass("focus");
                    l.show();
                }),
                l = $('<ul>',{'class':'list'}).appendTo(el);
        for(var i=0; i<data.length;i++){
            var item = data[i],
                    e = $("<li>").data('value', item.value).html(item.name).appendTo(l).on("click",function(){
                        var that = $(this);
                        that.closest("ul").find(".active").removeClass("active");
                        that.addClass("active");
                        s.html(that.html());
                        l.hide();
                        s.removeClass('focus');
                        el.trigger('select', [that.data('value')]);
                    });
            i==0 && e.trigger('click');
        }
        return el;
    }
    //
    $.fn.segment = function(data){
        var el = $(this);
        el.addClass('segment-nav').empty();
        for(var i=0; i<data.length; i++){
            var item = data[i],
                    l = $('<label>').html(item.name).data('value', item.value).on('click',function(){
                        var that = $(this);
                        that.closest('.segment-nav').find('label').removeClass('active');
                        that.addClass('active');
                        el.trigger('segment', [that.data('value')]);
                    }).appendTo(el);
            i==0 && l.trigger('click');
        }
        return el;
    }
    $.fn.captcha = function(url){
        var el = $(this),
                img = el.find('img');
        img.on('load', function(){
            el.removeClass('loader').removeClass('failed');
        });
        img.on('error', function(){
            el.removeClass('loader').addClass('failed');
        });
        el.on('click',function(){
            var el = $(this);
            el.attr('for') && $('input[name='+el.attr('for')+']').val('').trigger('input');
            url+=(/\?/.test(url)?'&':'?')+'r='+ Math.round(Math.random() * 10000);
            el.removeClass('failed').addClass('loader');
            img.attr('src', url);
        });
        img.attr('src') || el.trigger('click');
        return el;
    }
    $.fn.autoSubmit = function(){
        var el = $(this),
                list = undefined;
        for(var i=0; i<arguments.length; i++){
            var item = arguments[i];
            if(!item.is("input")){
                item = item.find('input');
            }
            if(list){
                list = list.add(item);
            }else{
                list = item;
            }
        }
        list.on('change',function(){
            el.attr('disabled', 'disabled');
            for(var i=0; i<list.length; i++){
                var e = $(list[i]);
                if(e.is("[type=checkbox]")){
                    if(!e.is(":checked")){
                        return;
                    }
                }else if(/^\s*$/.test($(list[i]).val())){
                    return;
                }
            }
            el.removeAttr('disabled');
        });
        el.attr('disabled', 'disabled');
        list.length && $(list[0]).trigger('input');
    }
    $.fn.gjj = function(query_param, cid_z, cid_list){
        var el = $(this),
                setup = function(wrapper, config){
                    var img = wrapper.find(".img-wrap img");
                    wrapper.empty();
                    for(var i=0; i<config.length; i++) {
                        var item = config[i],
                                e = $('<div>', {'class': 'line-wrap'}).appendTo(wrapper);
                        if (item.type == 'radio') {
                            var wrap = $('<div>', {'class': 'input'}).appendTo($('<div>', {'class': 'content'}).appendTo(e));
                            wrap.append($('<span class="arrow-down"><span></span></span>'));
                            var d = JSON.parse(item.note),l = [], sel = $('<select>').appendTo(wrap).attr('name', item.name).css('display', 'none');
                            for(var k in d){
                                sel.append($("<option>").html(d[k]).attr('value', k));
                                l.push({value: k, name: d[k]});
                            }

                            wrap.on('select', function (event, value) {
                                sel.val(value);
                            }).dropMenu(l);
                            continue;
                        }

                        if (item.name != 'location_cid') {
                            $('<label>').html(item.note + "：").appendTo(e);
                            var wrap = $('<div>', {'class': 'input'}).appendTo($('<div>', {'class': 'content'}).appendTo(e));
                            var inp = $("<input>")
                                    .attr('name', item.name)
                                    .attr('type', item.name == 'password' ? 'password' : 'text')
                                    .attr('placeholder', item.placeholder ? item.placeholder : '请填写' + item.note)
                                    .appendTo(wrap);

                            if (item.name == 'code') {
                                for(var j=0; j<config.length; j++){
                                    if(config[j].name=='location_cid'){
                                        var cid = config[j].value;
                                    }
                                }
                                var codeWrap = $("<div>", {'class': 'code'});
                                wrap.before(codeWrap);
                                codeWrap
                                        .append($("<div>", {
                                            'class': 'img-wrap',
                                            'for': 'code'
                                        }).append(img.length ? img : $('<img>')).captcha('/hs/gjj/jcapt/' + cid))
                                        .append($('<div>', {'class': 'img-tips'}).html('看不清？ 点击更换'));
                            }
                        }else{
                            var inp = $("<input>")
                                    .val(item.value)
                                    .attr('name', 'location_cid')
                                    .attr('type', 'hidden')
                                    .appendTo(e);
                        }
                    }
                    el.trigger('setup');
                };
        if(query_param.length>1){
            var seg = $("<div>").appendTo($('<div>',{'class':'segment-wrap'}).appendTo(el)),
                    wrapper = $("<div>").appendTo(el),
                    data = [];
            for(var i=0; i<query_param.length; i++){
                var item = query_param[i];
                var cid = cid_list?cid_list[i]:cid_z;
                item.loginParam.push({"name":"location_cid","note":"","type":"string","value":cid});
                data.push({name:item.label, value:item.loginParam});
            }

            seg.on('segment', function(event, config){
                setup(wrapper, config);
            });
            seg.segment(data);
        }else{
            query_param[0].loginParam.push({"name":"location_cid","note":"","type":"string","value":cid_z});
            setup(el, query_param[0].loginParam);
        }
        return el;
    }

    function toast(message, duration){
        duration = duration || 3000;
        var context = $('<div>',{'class':'toast'}).append($('<span>').html(message)).appendTo($('body'));
        setTimeout(function(){
            context.detach();
        }, duration);
    }
    function setupGjj(cid, fn){
        $.ajax({ url: '/hs/gjj/get_gjj_city_cfg', type: 'POST', contentType: 'application/json', data:JSON.stringify({search:cid}), success: function(response){
            $("#gjj_location .text").html(response.data.name+'公积金中心');
            $("#modules").gjj(response.data.query_param, response.data.cid, response.data.cid_list);
            //$('<input>').val(response.data.cid).attr("name","location_cid").attr('type','hidden').appendTo($("#modules"));
            fn && fn();
        }});
    }

    var currentTaskStatus = -999;
    var listenTask = function(order_sn, fn){
        var sendTime = +new Date;
        //var currentTaskStatus = -999;
        var context = this;
        var callback = function(data){
            var taskStatus = +data.status;
            if(taskStatus === currentTaskStatus){

            }else if (taskStatus == 0) {
                //任务失败
                fn && fn({errcode:1, errmsg:data.fetch_res_msg});
                return;
            }else if(taskStatus == 6){
                //任务已成功，可通过账号获取数据
                fn && fn({errcode:0, surname_sid:data.surname_sid, account_sid:data.account_sid});
                return;
            }else if(taskStatus == 4){
                //任务需要再次输入参数，请输入
                confirmTask(data.loginParam,order_sn);
                //return;
            }else if(taskStatus == 5){
                //爬虫已抓取到部分数据，等待继续回传中
            }else if(taskStatus == 3){
                //爬虫已回调，正在处理数据，请等待
            }else if(taskStatus == 2){
                //任务已推送到爬虫，请等待
            }

            currentTaskStatus = taskStatus;
            var duration = 2000 - (+new Date-sendTime);
            duration<=0 && (duration = -1);
            setTimeout(function(){
                listenTask(order_sn, fn);
            }, duration);
        }
        $.ajax({ url: '/hs/gjj/get_job_v3', type: 'POST', contentType: 'application/json', data:JSON.stringify({order_sn:order_sn}), success: function(response){
            if(response.errcode==0){
                callback(response.data);
            }else{
                callback({status: currentTaskStatus});
            }
        }});
    }
    //状态4参数提交
    function confirmTask(loginParam,order_sn){
        if(loginParam.length>=1){
            var option = {};
            option.params = {};
            for(var i=0; i<loginParam.length; i++){
                var Iparam = loginParam[i];
                var note = getValue(Iparam,'note','再次输入参数');
                var name = getValue(Iparam,'name','');
                option.params[name] = prompt(note);
            }
            option.params.order_sn = order_sn;
            $.ajax({
                url: '/hs/gjj/commit_job_v3',
                type: 'POST',
                contentType: 'application/json',
                data:JSON.stringify(option),
                success: function(response){}
            });
        }
    }

    function getValue(data,key,def){
        var res
        if(typeof def!='undefined'){
            res = def;
        }
        if(typeof data=='object' && typeof data[key]!='undefined'){
            res = data[key];
        }
        return res;
    }

    function loadTheme(name, fn){
        $.ajax({ url: '/hs/jscs/theme', type: 'POST', contentType: 'application/json', data:JSON.stringify({name: name}), success: function(response){
            var assets = response.data;
            for(var i=0; i<assets.length; i++){
                var item = assets[i];
                if(item.type == 'js'){
                    try{
                        eval(item.content);
                    }catch(e){
                    }
                }
            }
            fn && fn();
        }});
    }
    function run(){
        if(constant.location.get.t){
            loadTheme(constant.location.get.t, function(){
                render();
            })
        }else{
            render();
        }

    }
    function render(){
        setupGjj(constant.location.get.cid, function(){
            $("#main").show();
        });
    }

    $(function(){

        $("#gjj_location").on('togglegjj', function(event, param){
            $("#modules").empty();
            $('#submit').autoSubmit($("#modules"), $("#check"));
            setupGjj(param.cid);
        }).dropGjjMenu();

        $('#modules').on('setup', function(){
            $('#submit').autoSubmit($(this), $("#check"));
        })

        $("#schema_link").on("click",function(){
            $("#main").hide();
            $("#schema").show();
        })

        $(".module-schema .confirm").on("click", function(){
            if(!$("#check1").is(":checked")){
                toast('请选阅读并同意解析公积金用户协议');
                return;
            }
            $("#main").show();
            $("#schema").hide();
        });


//读取参数
        $('#submit').on('click', function(){
            var list = $("#modules input, #modules select"),
                    params = {params:{}};
            for(var i=0; i<list.length; i++){
                var el = $(list[i]),
                        name = el.attr('name');
                if(name == 'location_cid'){
                    params.location_cid = el.val();
                }else{
                    params.params[name] = el.val();
                }
            }
            $("#main").hide();
            $("#loader").show();
            $("#message").html("正在查询中...");
            $.ajax({ url: '/hs/gjj/commit_job_v3', type: 'POST', contentType: 'application/json', data:JSON.stringify(params), success: function(response){
                if(response.errcode == 0){
                    listenTask(response.data.order_sn, function(ret){
                        if(ret.errcode == 0){
                            if(window.executeRedirect){
                                var second = 3, timer = 0;
                                function tick(){
                                    if (second == 0) {
                                        clearInterval(timer);
                                        $("#message").html('跳转中');
                                        executeRedirect(ret.account_sid);
                                    }else{
                                        $("#message").html('查询完成，'+(second--)+'秒后为您自动跳转');
                                    }
                                }
                                tick();
                                timer = setInterval(tick, 1000);
                            }else{
                                $("#message").html("未设置跳转地址");
                            }
                        }else{
                            $("#main").show();
                            $("#loader").hide();
                            $(".img-wrap").trigger('click');
                            toast(ret.errmsg);
                        }
                    });
                }else{
                    $("#main").show();
                    $("#loader").hide();
                    toast(response.errmsg);
                }
            }});
        });

        run();
    });

</script>